<template>
  <el-menu
    :default-active="$route.path"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    router
  >
    <el-menu-item @click="isCollapse = !isCollapse">
      <i :class="isCollapse ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left'"></i>
      <span slot="title">{{ isCollapse ? '展开' : '收起' }}</span>
    </el-menu-item>
    <el-menu-item
      v-for="item in menuList"
      :key="item.index"
      :index="item.index"
    >
      <i :class="item.icon"></i>
      <span slot="title">{{ item.title }}</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
import barConf from '@/config/barConf.json';
export default {
  data() {
    return {
      isCollapse: true,
      menuList: barConf
    };
  },
  name: 'NavBar'
};
</script>

<style scoped>
.el-menu {
  z-index: 999;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 170px;
}
.el-menu-item {
  -webkit-user-select: none;
  user-select: none;
  margin: 2em 0em;
}
</style>
